import React, { Component } from 'react';
import SubCom from './SubCom';

class TopCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
      total: 0
    };
  }
  changeTotal(count) {
    const { total } = this.state;
    this.setState({
      total: total + count
    })
  }
  render() {
    const { value, total } = this.state;

    return (
      <div className="test-com">
        toal is : {total}
        <div>
          <SubCom value={value} changeTotal={this.changeTotal.bind(this)} />
          <SubCom value={value} changeTotal={this.changeTotal.bind(this)} />
          <SubCom value={value} changeTotal={this.changeTotal.bind(this)} />
          <SubCom value={value} changeTotal={this.changeTotal.bind(this)} />
        </div>
      </div>
    )
  }
}

export default TopCom;